﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            font-family: Arial, sans-serif;
        }

        h2 {
            text-align: center;
        }

        .basic-info,
        .purchase-order {
            border: 1px solid #ccc;
            padding: 20px;
            margin-bottom: 20px;
        }

        .form-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            align-items: start;
        }

            .form-row > div {
                width: 48%;
            }

            .form-row label {
                display: block;
                margin-bottom: 5px;
                font-weight: normal;
            }

            .form-row input,
            .form-row select,
            .form-row textarea {
                width: 100%;
                padding: 8px;
                box-sizing: border-box;
                vertical-align: middle;
            }

        .system-no {
            margin-left: 10px;
        }

        button {
            padding: 8px 15px;
            margin-right: 10px;
        }

        .table-container {
            max-height: 400px;
            overflow-y: auto;
            margin-top: 10px;
            border: 1px solid #ccc;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

            table th,
            table td {
                border: 1px solid #ccc;
                padding: 8px;
                text-align: left;
                vertical-align: middle;
            }

            table tfoot tr td {
                text-align: right;
            }

        .checkbox-align {
            vertical-align: middle;
            margin-right: 5px;
        }

        table input[type="text"] {
            width: 100%;
            box-sizing: border-box;
            border: none;
            background: transparent;
        }
    </style>
    <link rel="stylesheet" href="styles.css"> <!-- 引入外部CSS文件 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增到票</title>
</head>

<body>
    <div class="container">
        <h2>新增到票</h2>
        <div class="basic-info">
            <h3>基础信息</h3>
           
            <div class="form-row">
                <div>
                    <label for="billingStae">到票单号</label>
                    <input type="text" id="billingStae">
                    <span class="system-no">
                        <input type="checkbox" id="systemNoCheckbox"> 系统编号
                    </span>
                </div>
                <div>
                    <label for="billingtopic">到票主题</label>
                    <input type="text" id="billingtopic" placeholder="请输入开票主题">
                </div>
            </div>
            <div class="form-row">
                <div>
                    <label for="billingtype">发票类型</label>
                    <select id="billingtype">
                        <option value="">请选择发票类型</option>
                        <option value="增值税专用发票">增值税专用发票</option>
                        <option value="增值税普通发票">增值税普通发票</option>
                    </select>
                </div>
                <div>
                    <label for="billingDate">到票日期</label>
                    <input type="date" id="billingDate">
                </div>
            </div>

            <div class="form-row">
                <div>
                    <label for="billingsale">采购订单</label>
                    <input type="checkbox" id="billingsale" class="checkbox-align">不绑定销售订单
                </div>

                <div>
                    <div>
                        <label for="billTicket">开票方</label>
                        <select id="billTicket">
                            <option value="">请选择供应商名称</option>
                            <option value="供应商A">供应商A</option>
                            <option value="供应商B">供应商B</option>
                            <option value="供应商C">供应商C</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div>
                    <label for="number">发票号</label>
                    <input type="text" id="number" placeholder="请输入发票号">
                </div>
                <div>
                    <label for="remark">备注</label>
                    <textarea id="remark" placeholder="请输入备注"></textarea>
                </div>
            </div>
        </div>
        <div class="purchase-order">
            <h3>采购订单</h3>
            <button id="addButton">添加</button>
            <button id="removeButton">移除</button>
            <div class="table-container">
                <table id="purchaseTable">
                    <thead>
                        <tr>
                            <th><input type="checkbox"></th>
                            <th>采购编码</th>
                            <th>采购主题</th>
                            <th>供应商名称</th>
                            <th>采购日期</th>
                            <th>总金额</th>
                            <th>已到票金额</th>
                            <th>到票金额</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div style="text-align: right; margin-top: 10px;">
                到票总金额: <span id="totalAmount">0</span>
            </div>
        </div>
        <button id="submitButton">提交</button>
        <script src="script.js"></script> <!-- 引入外部JavaScript文件 -->
    </div>
</body>
<script>


        document.addEventListener('DOMContentLoaded', function () {
        const systemNoCheckbox = document.getElementById('systemNoCheckbox');
        const billingStaeInput = document.getElementById('billingStae');
        const addButton = document.getElementById('addButton');
        const purchaseTableBody = document.getElementById('purchaseTable').getElementsByTagName('tbody')[0];
        const submitButton = document.getElementById('submitButton');

        systemNoCheckbox.addEventListener('click', function () {
            if (this.checked) {
                const randomLetters = generateRandomLetters(4);
                const randomNumbers = generateRandomNumbers(6);
                const generatedValue = randomLetters + randomNumbers;
                billingStaeInput.value = generatedValue;
                const generatedValueCell = document.getElementById('generatedValueCell');
                if (generatedValueCell) {
                    generatedValueCell.value = generatedValue;
                }
            } else {
                billingStaeInput.value = '';
                const generatedValueCell = document.getElementById('generatedValueCell');
                if (generatedValueCell) {
                    generatedValueCell.value = '';
                }
            }
        });

        addButton.addEventListener('click', function () {
            const newRow = document.createElement('tr');
            newRow.innerHTML = `
                <td><input type="checkbox"></td>
                <td><input type="text" id="generatedValueCell"></td>
                <td><input type="text" value="物料采购0021"></td>
                <td><input type="text" value="迷糊食品供应商"></td>
                <td><input type="text" value="2026-06-07"></td>
                <td><input type="text" value="10,000.00"></td>
                <td><input type="text" value="5,000.00"></td>
                <td><input type="text" placeholder="请输入"></td>
                <td><input type="text" placeholder="请输入"></td>
                <td><button class="removeRow">移除</button></td>
            `;
            purchaseTableBody.appendChild(newRow);

            newRow.querySelector('.removeRow').addEventListener('click', function () {
                newRow.remove();
            });
        });

        function generateRandomLetters(length) {
            const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
            let result = '';
            for (let i = 0; i < length; i++) {
                result += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            return result;
        }
        function generateRandomNumbers(length) {
            return Math.floor(Math.random() * Math.pow(10, length)).toString().padStart(length, '0');
        }

        submitButton.addEventListener('click', function () {
            // 收集基础信息数据
            const requestData = {
                    bid: 0,
                    billingStae: document.getElementById('billingStae').value,
                    billingtopic: document.getElementById('billingtopic').value,
                    billingtype: document.getElementById('billingtype').value,
                    billingDate: document.getElementById('billingDate').value,
                    billingsale: true,
                    billTicket: document.getElementById('billTicket').value,
                    number: document.getElementById('number').value,
                    remark: document.getElementById('remark').value,
                    urchaseOrdps: []
            };

            // 收集采购订单数据
            const rows = document.querySelectorAll('#purchaseTable tbody tr');
            rows.forEach(row => {
                const cells = row.querySelectorAll('td');
                requestData.urchaseOrdps.push({
                    urcid: 0,
                    urcStae: cells[1].querySelector('input').value,
                    urcic: cells[2].querySelector('input').value,
                    urcName: cells[3].querySelector('input').value,
                    urcTime: cells[4].querySelector('input').value,
                    urcamount: cells[5].querySelector('input').value,
                    urceamount: cells[6].querySelector('input').value,
                    urcinvoice: cells[7].querySelector('input').value,
                    urcremark: cells[8].querySelector('input').value
                });
            });

 


                let submitButton = document.getElementById('submitButton');
        $(document).ready(function () {
            $('#submitButton').click(function () {
                $.ajax({
                    //url: 'http://localhost:5090/api/ClientsManagement/AddurchaseOrdp',
                    url: "@ViewBag.BaseUrl/T8/ClientsManagement/AddurchaseOrdp",
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(requestData),
                    beforeSend: function () {
                        submitButton.textContent = '正在提交...';
                        submitButton.disabled = true;
                    },
                    success: function (data) {
                        if (data.code === 212) {
                            alert('提交成功');
                            window.location.href = '/Procurements/GeturchaseOrdp';
                        } else {
                            alert('提交失败: ' + (data.message || '未知错误'));
                        }
                    },
                    error: function (error) {
                        console.error('错误:', error);
                        alert('请求出错: ' + error.statusText);
                    },
                    complete: function () {
                        submitButton.textContent = '提交';
                        submitButton.disabled = false;
                    }
                });
            });
        });
        });
    });
</script>
</html>